<!--
 * @Author: yuqy
 * @Date: 2023-04-10 19:26:39
 * @LastEditors: yuqy
 * @LastEditTime: 2023-10-31 16:58:05
 * @Descripttion: -
-->
<template>
  <div class="login_wrap" :class="{'loginContainer_web':nowSystem =='web', 'loginContainer_mid': VUE_APP_TYPE == 'MID'}">
      <h2>当前系统:{{ nowSystem }}</h2>
      <h2>当前中性版本: {{ VUE_APP_TYPE }}</h2>
      <h2>当前版本类型: {{ VITE_APP_BASE_URL }} </h2> 
      <h2>当前版本号: {{ APP_VERSON }}</h2>
      {{ listData }}
      <v-btn color='red' @click="addList">新增</v-btn>
      <div class="move_wrap" id="upload_list_wrap">
        <ul class="list_wrap placeholder_wrap" >
            <li style="opacity: 0;" v-for="(item,index) in listData" :key="index + 1000" /> 
        </ul>
        <ul class="list_wrap list_move_wrap" >
            <li v-for="(item,index) in listData" :key="index">
                <h2>{{ item }} --- {{ index }}</h2>
                <span>删除</span>
            </li>
        </ul>
      </div>
  </div>
</template>
<script >
import { getAction } from "@/api";
import { ref, onMounted, onUnmounted, nextTick } from "vue";
import { getCurrentInstance } from "@vue/runtime-core";
import { satrtMoveInit }  from '@/libs/move.js'
// import { setTimeout } from 'timers';
export default {
  setup(){
    const _self = ref();
    const count = ref(0);
    let id = 'upload_list_wrap';
    const listData = ref([1, 2, 3, 4]);
    // 列表初始值
    let nowlistData = JSON.parse(JSON.stringify(listData.value));
    const getDemo = async () => {
      let res = await getAction("/miniprogram/protocol", { protocolType: 0 });
    };
    const setLoading = () => {
    };

    // 新增列表
    const addList = async () => {
      let length = listData.value.length + 1;
      console.log(length);
      nowlistData.push(length);
      console.log(nowlistData);
      listData.value = nowlistData;
      console.log(listData.value);
      await nextTick();
      satrtMoveInit(id, callBack);
    }

    const callBack =(start, end) => {
      let startVal = nowlistData[start];
      let endVal = nowlistData[end];
      nowlistData[start] = endVal;
      nowlistData[end] = startVal;
    }
    /**
     * @name: 
     * @msg: 
     * @return {*}
     */    
    onMounted(() => {
      // 初始化拖动事件
      satrtMoveInit(id, callBack)
    });
    /**
     * @name: 
     * @msg: 
     * @return {*}
     */    
    onUnmounted(() => {
      console.log('我走了额啊')
      
      
    });
    return { 
      setLoading,
      listData,
      addList
    }
  },
  data() {
    return {
      isWeb: ''
    }
  }
}
</script>
<style scoped lang="less">
.login_wrap {
  background: #333;
  height: 100vh;
  font-size: 24px;
  color: #fff;
  h2 {
    text-align: left;
    padding: 10px 20px;
  }
}

.move_wrap {
  border: 10px solid #fff;
  position: relative;
  padding-top: 0;
  overflow: hidden;
}
.list_wrap {
  background: blue;
  overflow: hidden;
  position: relative;
  z-index: 9;
}
.list_wrap> li {
  width: 200px;
  height: 100px;
  border: 1px solid red;
  float: left;
  margin:0 10px 10px 0;
}


.list_move_wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 99;
  li {
    background: #333;
  }
}

</style>
